<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import {globalStore} from "@/assets/store-index.js";
const gs = globalStore()

const personList = ref([]);
const infoShow = ref(false);
const infoForm = ref({})
const remove = (id) => {
  axios.post("/student/remove", {id:id}).then(response => {

    listInfo();
    ElMessage.success(response.message);

  }).catch(error => {
    ElMessage.error(error)
  })
}

const openInfo = () => {
  infoForm.value = {}
  infoShow.value = true
}
const save = () => {
  //1. 检测数据
  const info = {...infoForm.value}

  //2.将数据添加到personList中
  //通过网络发送数据奥服务端，保存数据到数据库
  axios.post("/student/save", info).then(response => {
    listInfo();
    ElMessage.success(response.message)
    infoShow.value = false
  }).catch(error => {
    ElMessage.error(error)
  })

}
const openEdit = (id) => {
  axios.post("/student/info", {id:id}).then(response => {
    const info = response.data;
    infoForm.value = {...info}
    infoShow.value = true;
  }).catch(error => {
    ElMessage.error(error)
  })
}


const requestBean = ref({pageNum:1, pageSize:5, total:10,orderBy:'created_time desc',params:{}})
const listInfo = () => {
  const token = gs.token;
  axios.post("/student/list",{...requestBean.value}).then(response => {
    // 现在服务端返回的是一个PageInfo对象， 这个对象的内部 有 total(数据总数) ,list(数据列表) 两个属性
    const pageInfo = response.data;
    personList.value = pageInfo.list;
    requestBean.value.total = pageInfo.total;
  }).catch(error => {
    ElMessage.error(error)
  })
}
const sortChange = (sort) => {
  const order = sort.order === 'ascending' ? 'asc' : 'desc';
  const prop = sort.order? sort.prop : 'created_time';
  requestBean.value.orderBy = `${prop} ${order}`;
  listInfo();
}

const uploadImage = (options) => {
  const file = options.file; // 这就是选中的文件
  //这是一个存放文件的容器
  const formData = new FormData();
  formData.append("file", file);

  axios.postForm("/file/upload", formData).then(response => {
    infoForm.value.surface = response.data;
  }).catch( error=>{
    ElMessage.error(error)
  })
}
// 预加载
onMounted(()=>{
  listInfo();
})
</script>

<template>

  <div style="display: flex; justify-content: space-between;align-items: center">
    <div>
      <el-button type="primary" @click="openInfo" style="margin-bottom: .5rem">添加</el-button>
    </div>
    <div style="display: flex;align-items: center;gap: 10px; ">
      <el-input v-model="requestBean.params.title" placeholder="请输入姓名" style="width: 140px !important;display: block" clearable/>
      <el-select placeholder="请选择性别" v-model="requestBean.params.gender" clearable style="width: 140px">
        <el-option label="男" value="男"/>
        <el-option label="女" value="女"/>
      </el-select>
      <el-button type="primary" @click="listInfo">查询</el-button>
    </div>
  </div>

  <el-table :data="personList" border stripe @sort-change="sortChange">
    <el-table-column prop="id" label="编号" width="280"/>
    <el-table-column prop="surface" label="头 像">
      <template #default="props">
        <img :src="props.row.surface" style="width: 80px; height: 80px; border-radius: 5%" />
      </template>
    </el-table-column>
    <el-table-column prop="title" label="名字" width="180"/>
    <el-table-column prop="age" label="年龄" sortable="custom" width="180"/>
    <el-table-column prop="gender" label="性别" sortable="custom" width="180"/>
    <el-table-column prop="address" label="地址"/>
    <el-table-column label="操作" width="180">
      <template #default="props">
        <el-button type="primary" size="small" @click="openEdit(props.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="remove(props.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>
    <el-pagination layout="prev, pager, next" :total="requestBean.total" :page-size="requestBean.pageSize"
                   v-model:current-page="requestBean.pageNum" @change="listInfo"/>
  </div>

  <div>
    <el-dialog v-model="infoShow" title="详情" width="500">
      <el-form :model="infoForm">
        <el-form-item label="头像" :label-width="60">
          <el-upload class="avatar-uploader" :show-file-list="false" :http-request="uploadImage" accept="image/png,image/jpeg,image/webp">
            <img v-if="infoForm.surface" :src="infoForm.surface" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名" :label-width="60">
          <el-input v-model="infoForm.title"  />
        </el-form-item>

        <el-form-item label="年龄" :label-width="60">
          <el-input v-model="infoForm.age" type="number" min="1"/>
        </el-form-item>
        <el-form-item label="性别" :label-width="60">
          <el-select v-model="infoForm.gender" placeholder="请选择性别">
            <el-option label="男" value="男"/>
            <el-option label="女" value="女"/>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" :label-width="60">
          <el-input v-model="infoForm.address"  />
        </el-form-item>
      </el-form>
      <template #footer>
        <div >
          <el-button @click="infoShow = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>